<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="icon" href="${base}/images/icons/logo.png" type="image/x-icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微学习-登录</title>
    <link rel="stylesheet" type="text/css" href="/plugins/bootstrap4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/login/fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="/plugins/login/css/util.css">
    <link rel="stylesheet" type="text/css" href="/plugins/login/css/main.css">

    <script src="/plugins/sweetalert/sweetalert.min.js"></script>


    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
</head>
<body>

<div class="limiter">
    <div class="container-login100" style="background-image: url('/images/bg-01.jpg');">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
            <form class="login100-form validate-form" action="/login" method="post">
                <span class="login100-form-title p-b-49">登录</span>

                <div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
                    <span class="label-input100">用户名</span>
                    <input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                           th:value="${username==null?'admin':username}">
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>

                <div class="wrap-input100 validate-input" data-validate="请输入密码">
                    <span class="label-input100">密码</span>
                    <input class="input100" type="password" name="password" placeholder="请输入密码" value="123">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>
                <input type="hidden" name="role" value="2">

                <div class="text-right p-t-8 p-b-31">
                    <a href="#" onclick="registerDialog()">没有账号？注册</a>
                </div>

                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button class="login100-form-btn">登 录</button>
                    </div>
                </div>

                <div class="txt1 text-center p-t-54 p-b-20">
                    <span>第三方登录</span>
                </div>

                <div class="flex-c-m">
                    <!--<%&#45;&#45;<a href="#" class="login100-social-item bg1">&#45;&#45;%>-->
                    <!--<%&#45;&#45;<i class="fa fa-wechat"></i>&#45;&#45;%>-->
                    <!--<%&#45;&#45;</a>&#45;&#45;%>-->

                    <a href="#" class="login100-social-item bg2">
                        <i class="fa fa-qq"></i>
                    </a>

                    <!--<%&#45;&#45;<a href="#" class="login100-social-item bg3">&#45;&#45;%>-->
                    <!--<%&#45;&#45;<i class="fa fa-weibo"></i>&#45;&#45;%>-->
                    <!--<%&#45;&#45;</a>&#45;&#45;%>-->
                </div>

                <div class="flex-col-c p-t-25">
                    <a href="#" onclick="registerDialog" class="txt2">立即注册</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="${base}/plugins/jquery-3.3.1.min.js"></script>
<script src="${base}/plugins/login/js/main.js"></script>
<script>

    function registerDialog() {
        layui.use('layer', function () {
            var layer = layui.layer;

            layer.open({
                type: 1,
                title: '注册',
                maxWidth: 450,
                content: $('#registerModel') //这里content是一个普通的String
            });
        });
    }

</script>
</body>

<div id="registerModel" style="padding: 20px; border-radius: 10px; display: none;">
    <form class="layui-form" action="${base}/register" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="realName" required lay-verify="required" placeholder="姓名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即注册</button>
            </div>
        </div>
    </form>
</div>
</html>